/*
 * @Author: jinghua
 * @Date: 2018-3-22 10:37:42
 * @Last Modified by: jinghua
 * @Last Modified time: 2018-3-22 10:37:42
 * @description：地区三级联动
 */
<template>
    <div >
        <el-form-item :label="title" :label-width="labelWidth">
            <el-row :gutter="5">
                <el-col :span="4">
                    <el-select    v-model="address.province" placeholder="请选择省" @change="selectProvince">
                        <el-option
                            v-for="(item,index) in provinceArr"
                            :key="index"
                            :label="item.district"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-select  v-model="address.city" placeholder="请选择市"  @change="selectCity">
                        <el-option
                            v-for="(item,index) in cityArr"
                            :key="index"
                            :label="item.district"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-select  v-model="address.district" placeholder="请选择区"  @change="selectDistrict">
                        <el-option
                            v-for="(item,index) in districtArr"
                            :key="index"
                            :label="item.district"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-input v-model="address.registrationDetailed"  :maxlength="100"></el-input>
                </el-col>
            </el-row>
        </el-form-item>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        props: {
            labelWidth: {
                type: String,
                default: '120px'
            },
            title: {//题目
                type: String,
                default: ''
            },
            address: { //数据
                type: Object,
                default: {}
             },
            //实例：address: {id: '',businessId: '',province: '',city: '',district: '',businessType: 1,registrationDetailed: ''},
            //businessType为1 代表 注册地址，businessType为2 代表办公地址，
            //id: '',businessId: '',为可选字段
            //编辑时回显：
            // this.$refs.regist.inview(this.address)
            //regist 为组件的ref
            //this.address 为地区回显的数据
        },
        watch: {
        },
        data() {
            return {
                regionData: JSON.parse(localStorage.region),
                provinceArr: [],
                cityArr: [],
                districtArr: [],
            }
        },
        mounted() {
            this.filterProvinceArr()
        },
        methods: {
            filterProvinceArr() {//筛选省数组
                //字符化
                this.regionData.map((item)=>{
                    item.id = item.id.toString()
                    item.level = item.level.toString()
                    item.pid = item.pid.toString()
                })
                this.regionData.map((item)=>{
                    if ( item.level === '1') {
                         this.provinceArr.push(item)
                    }
                })
            },
            filterCityArr(val) { //筛选市数组
                this.cityArr = []
                this.regionData.map((item)=>{
                    if ( val === item.pid) {
                        this.cityArr.push(item)
                    }
                })
            },
            filterDistictArr(val) { //筛选区数组
                this.districtArr = []
                this.regionData.map((item)=>{
                    if ( val === item.pid) {
                        this.districtArr.push(item)
                    }
                })
            },
            selectProvince(val) {//改变省
                this.address.city = ''
                this.address.district = ''
                this.address.registrationDetailed = ''
                this.districtArr = []
                this.filterCityArr(val)
                //赋值
                this.regionData.map((item)=>{
                    if ( this.address.province === item.id) {
                        this.address.registrationDetailed = item.district  //拼接省
                    }
                })
            },
            selectCity(val) {//改变市
                this.address.district = ''
                this.address.registrationDetailed = ''
                this.filterDistictArr(val)
                this.regionData.map((item)=>{
                    if ( this.address.province === item.id) {
                        this.address.registrationDetailed = item.district  //拼接省
                    }
                    if ( this.address.city === item.id) {
                        this.address.registrationDetailed += item.district  //拼接市
                    }
                })
            },
            selectDistrict() {//改变区
                this.address.registrationDetailed = ''
                this.regionData.map((item)=>{
                    if ( this.address.province === item.id) {
                        this.address.registrationDetailed = item.district  //拼接省
                    }
                    if ( this.address.city === item.id) {
                        this.address.registrationDetailed += item.district  //拼接市
                    }
                    if ( this.address.district === item.id) {
                        this.address.registrationDetailed += item.district  //拼接区
                    }
                })
            },
            //数据初始化页面
            inview(address) {
                this.filterCityArr(address.province)
                this.filterDistictArr(address.city)
            }
        },
        components: {
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
